<template>
  <div id="header">
    <span class="seller_name">{{seller.name}}</span>
    <img v-bind:src="seller.avatar" alt="" v-on:click="showDetall">
    <div class="seller_meg">
      <span>配送约{{seller.deliveryTime}}分钟</span>
      <span>评分{{seller.score}}分</span>
      <span>起送价格{{seller.minPrice}}元</span>
    </div>
    <Detall></Detall>
  </div>
</template>

<script>
import {mapActions, mapGetters} from 'vuex'
import Detall from '../detall/Detall'
export default {
  name: 'Header',
  methods: {
    ...mapActions(['getSeller', 'showDetall'])
  },
  created () {
    // eslint-disable-next-line no-unused-vars
    var getSeller = this.getSeller()
  },
  computed: {
    ...mapGetters(['seller'])
  },
  components: {
    Detall
  }
}
</script>

<style scoped lang="less">
  #header{
    background-color: white;
    border-radius: 20px;
    margin: 10px;
    height: 100px;
    box-shadow: 2px 2px 2px #888888;
    .seller_name{
      font-size: 20px;
      font-weight: bold;
      position: relative;
      top: -10%;
      left: 5%;
    }
    .seller_meg{
      font-size: 8px;
      position: relative;
      left: 5%;
      top: 10px;
    }
    img{
      width: 50px;
      position: relative;
      left: 12%;
      top: -10px;
    }
  }
</style>
